
<template>
	<div class="screen_wrap echarts_box" style="padding: 1px;" v-loading="loading">
		<corner></corner>

		<div id="map"></div>

	</div>
</template>

<script>
	import { getWaterData } from "@/api/bigScreen/bigScreen";
	import { mapStyle,mapStyle3} from "@/components/common/option/system.js";
	import corner from '../public/corner'

	export default {
		components: {
			corner
		},
		data() {
			return {

			};
		},

		mounted() {
			getWaterData().then(res=>{	
				let arr=res.data.data
				// 百度地图API功能
				var map = new BMap.Map("map", {
					enableMapClick: false
				}); // 创建Map实例
				map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
				map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
				map.setMapStyle(mapStyle);
				var data = [];
				let len=arr.length
				for(var i=0;i<arr.length;i++){
					data.push({
						geometry: {
							type: 'Point',
							coordinates: [arr[i].logitude , arr[i].latitude]
						},
						// 具体点的icon设置
						iconOptions: {
							url: ['/img/bigScreen/58.png', '/img/bigScreen/58.png', '/img/bigScreen/58.png'][len % 3], // 非聚合时点的icon,可设置为空
							width: 20,
							height: 20
						}
					});					
				}

                

				var dataSet = new mapv.DataSet(data);
				var options = {
					// shadowColor: 'rgba(255, 250, 50, 1)',
					// shadowBlur: 10,
					// 非聚合点的颜色和大小，未设置icon或icon获取失败时使用
					fillStyle: 'rgba(255, 50, 0, 1.0)',
					size: 50 / 3 / 2, // 非聚合点的半径
					// 非聚合时点的icon设置，会被具体点的设置覆盖，可设置为空
					//          iconOptions: {
					//             url: '/img/bigScreen/51.png', 
					//             width: 50 / 3,
					//             height: 77 / 3,
					//             offset: {
					//                 x: 0,
					//                 y: 0
					//             }
					//          },
					minSize: 8, // 聚合点最小半径
					maxSize: 31, // 聚合点最大半径
					globalAlpha: 1, // 透明度
					clusterRadius: 150, // 聚合像素半径
					maxClusterZoom: 18, // 最大聚合的级别
					maxZoom: 19, // 最大显示级别
					minPoints: 5, // 最少聚合点数，点数多于此值才会被聚合
					extent: 400, // 聚合的细腻程度，越高聚合后点越密集
					label: { // 聚合文本样式
						show: true, // 是否显示
						fillStyle: 'white',
						// shadowColor: 'yellow',
						// font: '20px Arial',
						// shadowBlur: 10,
					},
					gradient: {
						0: "blue",
						0.5: 'yellow',
						1.0: "rgb(255,0,0)"
					}, // 聚合图标渐变色
					draw: 'cluster',
					methods: {
						click(point) {
							console.log(point)
						}
					}
				}
				var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);			   
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	#map {
		height: 100%;
	}
</style>